<template>
  <view class="container">
    <!-- 顶部区域 -->
    <view class="header">
      <!-- 搜索块 -->
      <navigator class="search-bar"
                 url="/pages/index/search">
        <image src="../../static/img/search.png"></image>
        <input type="text"
               placeholder-style="font-size: 26rpx; color: #999"
               placeholder="输入真题、资料、公司名称"
               disabled>
      </navigator>

      <!-- 轮播图 -->
      <view class="banner">
        <swiper class="swiper"
                @change="onChange"
                circular
                autoplay>
          <swiper-item class="item"
                       v-for="item in bannerList"
                       :key="item.id">
            <image background-size="cover"
                   :src="$serverIp+item.image"></image>
          </swiper-item>
        </swiper>
        <view class="num">{{num}}/{{bannerList.length}}</view>
      </view>

      <!-- 导航菜单 -->
      <view class="menu">
        <navigator v-for="item in menuList"
                   :key="item.id"
                   hover-class="none"
                   class="item"
                   :url="item.path">
          <image class="icon"
                 :src="item.icon"></image>
          <view class="title">{{item.text}}</view>
        </navigator>
      </view>
    </view>

    <!-- 招聘公告 -->
    <recruiting :dataList="recru1"></recruiting>

    <!-- 热门推荐与精彩课程 -->
    <view class="hot-curriculums">
      <!-- 热门推荐 -->
      <view class="hot comment">
        <view class="title">
          <view class="name">热门推荐</view>
          <view class="more">查看更多</view>
        </view>
        <!-- 列表 -->
        <scroll-view class="hot-list"
                     scroll-x="true">
          <navigator :url="'/pages/data/kecheng?id='+el.id"
                     v-for="el in hotList"
                     :key="el.id"
                     class="item"
                     hover-class="none">
            <image class="left"
                   :src="$serverIp+el.image"></image>
            <view class="right">
              <view class="name">{{el.name}}</view>
              <view class="num">{{el.buy_num}}人已学习</view>
              <view class="bar">
                <text class="price">￥{{el.now_price}}</text>
                <text class="look">{{el.watch_num}}人查看</text>
              </view>
            </view>
          </navigator>
        </scroll-view>
      </view>

      <!-- 精彩课程 -->
      <view class="curriculums-t comment">
        <view class="title">
          <view class="name">精彩课程</view>
          <view class="more">查看更多</view>
        </view>
        <!-- 列表 -->
        <view class="goods-list">
          <navigator class="item"
                     v-for="el in excellent"
                     :key="el.id"
                     hover-class="none">
            <image class="left"
                   :src="$serverIp+el.image"></image>
            <view class="mid">
              <view class="name">{{el.name}}</view>
              <view class="num">{{el.buy_num}}人已学习</view>
              <view class="bar">
                <text class="price">￥{{el.now_price}}</text>
                <text class="look">{{el.watch_num}}人查看</text>
              </view>
            </view>
            <view class="right"
                  @click="toke(el.id)">立即抢购</view>
          </navigator>
        </view>
      </view>
    </view>

    <!-- 课程列表分类列表 -->
    <view class="curriculums">
      <view class="nav">
        <view @click="toggle(0)"
              class="item"
              :class="{active:currentIndex==0}">笔试课程</view>
        <view @click="toggle(1)"
              class="item"
              :class="{active:currentIndex==1}">面试课程</view>
        <view @click="toggle(2)"
              class="item"
              :class="{active:currentIndex==2}">助攻辅导</view>
      </view>
      <view class="list">
        <view class="item"
              @click="toke(el.id)"
              v-for="el in typeListClass"
              :key="el.id">
          <image :src="$serverIp+el.image"></image>
          <view class="name">{{el.name}}</view>
          <view class="number">{{el.num||el.buy_num}}人已经学习</view>
          <view class="price">￥{{el.price||el.now_price}}</view>
        </view>
      </view>
      <view @click="tomore"
            class="more">查看更多</view>
    </view>

    <!-- 时事新闻 -->
    <recruiting :dataList="newsList"></recruiting>

    <!-- 热门话题 -->
    <view class="talk comment">
      <view class="title">
        <view class="name">热门话题</view>
        <view class="more">查看更多</view>
      </view>
      <view class="list">
        <view class="item"
              @click="tohot(el.id)"
              v-for="el in topic"
              :key="el.id">
          <view class="info">{{el.info}}</view>
          <image v-for="(pic,index) in el.images"
                 :key="index"
                 :src="$serverIp+pic"></image>
          <view class="bottom">
            <view class="l">
              <image src="../../static/img/消息.png"></image>
              <text>{{el.cmt_nums}}</text>
            </view>
            <view class="m">
              <image src="../../static/img/赞.png"></image>
              <text>{{el.zan_nums}}</text>
            </view>
            <view class="r">
              <image src="../../static/img/书.png"></image>
              <text>{{el.read_nums}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 热门试卷 -->
    <view class="question_bank comment">
      <view class="title">
        <view class="name">热门试卷</view>
        <view class="more">查看更多</view>
      </view>
      <view class="list">
        <view class="item"
              v-for="el in question"
              :key="el.id">
          <view class="left">{{el.name}}</view>
          <view class="right">{{el.answer_num}}人做过</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { menuList } from './data'
import recruiting from './recruiting.vue'
export default {
  components: {
    recruiting
  },
  data() {
    return {
      menuList: menuList,
      bannerList: [], //轮播图,
      recru1: [], //招聘公告
      num: 1,
      hotList: [],
      excellent: [], //精彩课程
      bishi: [], //笔试课程</view>
      faceList: [], //面试课程</view>
      fdList: [],

      currentIndex: 0, //点击面试或者笔试的下标
      newsList: [], //时事新闻
      topic: [], //热门话题
      question: [] //试卷
    }
  },
  async onLoad() {
    this.getBannerList()
    this.getRec()
    this.getHot({ is_hot: 1 })
    this.getHot({ is_good: 1 })
    this.getTypeList(1)
    this.getTypeList(2)
    this.getTypeList(false)
    this.getNewsList()
    this.getTopic()
    this.getquestion_bank()
  },
  methods: {
    //  轮播滑动
    onChange(e) {
      this.num = e.detail.current + 1
    },
    // 轮播
    async getBannerList() {
      let { data: res } = await this.$http.get('/zhang/banner/get_banner_list')
      this.bannerList = res.data
    },
    // 招聘信息
    async getRec() {
      let { data } = await this.$http.post('/zhang/Recruitinformation/show')
      this.recru1 = data.data
    },
    // 热门推荐
    async getHot(obj) {
      let { data } = await this.$http.post('/Curriculum/show', obj)
      if (obj.is_hot == 1) {
        this.hotList = data.data
      } else {
        this.excellent = data.data
      }
    },
    tomore() {
      uni.navigateTo({
        url: '/pages/copydata/copydata'
      })
    },
    tohot(id) {
      uni.navigateTo({
        url: '/pages/topic/topicdetail?id=' + id
      })
    },
    // 列表
    async getTypeList(type) {
      if (type == 1) {
        let { data: res } = await this.$http.post('/Curriculum/show', { type, is_index: 1 })
        this.bishi = res.data
      }
      if (type == 2) {
        let { data: res } = await this.$http.post('/Curriculum/show', { type, is_index: 1 })
        this.faceList = res.data
      }
      if (!type) {
        let { data: res } = await this.$http.post('/assists/show')
        this.fdList = res.data
      }
    },
    // 列表切换
    toggle(index) {
      this.currentIndex = index
    },
    async getNewsList() {
      let { data: res } = await this.$http.post('/zhang/Current_politics/show')
      this.newsList = res.data
    },
    // /话题
    async getTopic() {
      let { data: res } = await this.$http.post('/talk/index', { type: 2 })
      this.topic = res.data
    },
    // 试卷
    async getquestion_bank() {
      let { data: res } = await this.$http.post('/question_bank/show', { is_hot: 1 })
      this.question = res.data
    }
  },
  computed: {
    typeListClass() {
      if (this.currentIndex == 0) return this.bishi
      if (this.currentIndex == 1) return this.faceList
      if (this.currentIndex == 2) return this.fdList
    }
  }
}
</script>

<style lang="scss">
/* 招聘公告 */
.recruiting {
  background: #fff;
  margin: 20rpx 0;
  padding: 20rpx 0;
  display: flex;

  .logo {
    width: 100rpx;
    height: 100rpx;
    margin-left: 20rpx;
    margin-right: 50rpx;
  }
  .list {
    flex-grow: 1;
    .swiper {
      height: 100%;
      .item {
        height: 100%;
        .msg {
          display: flex;
          width: 100%;
          height: 100%;
          align-items: center;
          .icon {
            display: inline-block;
            padding: 0 20rpx;
            min-width: 50rpx;
            height: 40rpx;
            line-height: 40rpx;
            background: #ff3b30;
            color: #fff;
            font-size: 22rpx;
            text-align: center;
            margin-right: 20rpx;
          }
          .title {
            flex-grow: 1;
            color: #333;
            font-size: 28rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}

/* 共公标题样式 */
.comment {
  width: 750rpx;
  overflow: hidden;
  .title {
    width: 750rpx;
    padding: 40rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name {
      font-size: 34rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      &::before {
        content: '';
        width: 4rpx;
        height: 20rpx;
        background: #ffdd47;
        margin-right: 6rpx;
      }
    }
    .more {
      font-size: 24rpx;
      color: #666;
      background: url()
        no-repeat 106rpx 6rpx / 12rpx 22rpx;
      padding-right: 22rpx;
    }
  }
}

/* 热门试卷 */
.question_bank {
  background-color: #fff;
  margin-top: 20rpx;
  .list {
    margin-top: 10rpx;
    padding: 0 20rpx;
    .item {
      width: 100%;
      height: 86rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx solid #eee;
      .right {
        font-size: 20rpx;
        color: #666;
      }
    }
  }
}

/* 热门话题 */
.talk {
  background-color: #fff;
  .list {
    width: 100%;
    overflow: hidden;
    padding: 0 20rpx 50rpx 20rpx;
    box-sizing: border-box;
    .item {
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.16);
      padding: 30rpx 0;
      margin-bottom: 16rpx;
      margin-top: 16rpx;
      border-radius: 15rpx;
      .info {
        width: 100%;
        font-size: 24rpx;
        padding-left: 20rpx;
        box-sizing: border-box;
        padding-bottom: 30rpx;
      }
      image {
        width: 140rpx;
        height: 140rpx;
        margin-left: 20rpx;
      }
      .bottom {
        width: 100%;
        padding: 0 20rpx;
        margin-top: 30rpx;
        box-sizing: border-box;
        display: flex;
        view {
          flex-grow: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20rpx;
          color: #666;
          image {
            width: 28rpx;
            height: 26rpx;
            margin-right: 8rpx;
          }
        }
      }
    }
  }
}

/* 课程列表分类列表 */
.curriculums {
  width: 750rpx;
  overflow: hidden;
  background-color: #fff;
  margin-top: 20rpx;
  padding: 0 26rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .nav {
    width: 100%;
    display: flex;
    .item {
      flex-grow: 1;
      height: 100rpx;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
    }
    .active {
      font-size: 32rpx;
      font-weight: 700;
      font-family: Helvetica Neue, Helvetica, sans-serif;
      &::after {
        content: '';
        width: 60rpx;
        height: 4rpx;
        background: #ffdd47;
      }
    }
  }
  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 165 * 2rpx;
      margin-bottom: 20rpx;
      image {
        width: 165 * 2rpx;
        height: 200rpx;
      }
      .name {
        margin-bottom: 40rpx;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .number {
        display: flex;
        font-size: 24rpx;
        color: #666;
        align-items: center;
        margin: 10rpx 0;
        &::before {
          content: '';
          width: 28rpx;
          height: 28rpx;
          background: url('../../static/img/stud.png') no-repeat 0rpx 0rpx / 100% 100%;
          margin-right: 10rpx;
        }
      }
      .price {
        font-weight: 900;
        color: #ff3b30;
        font-size: 32rpx;
      }
    }
  }
  .more {
    width: 150rpx;
    height: 46rpx;
    background: #f2f2f2;
    font-size: 24rpx;
    border-radius: 23rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10rpx;
    margin-bottom: 50rpx;

    &:after {
      content: '';
      width: 12rpx;
      height: 22rpx;
      background-image: url();
      background-size: 100%;
      margin-left: 8rpx;
    }
  }
}

/* 招聘公告 */

/* 顶部区域 */
.header {
  width: 750rpx;
  padding: 15rpx 30rpx;
  box-sizing: border-box;
  background: #fff;
  /* 搜索框 */
  .search-bar {
    width: 100%;
    height: 60rpx;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    image {
      width: 30rpx;
      height: 30rpx;
      margin: 0 20rpx;
    }
    input {
      flex-grow: 1;
    }
  }
  /* 轮播图 */
  .banner {
    margin-top: 50rpx;
    width: 100%;
    padding: 0 10rpx;
    box-sizing: border-box;
    position: relative;
    .swiper {
      height: 300rpx;
      padding-bottom: 14px;
      background: url(/static/img/sy_img_br_bg@2x.1bad1671.png) no-repeat 0px 0px/ 100% 100%;
      .item {
        border-radius: 10rpx;
        overflow: hidden;
        height: 300rpx;
        image {
          width: 100%;
          height: 400rpx;
        }
      }
    }
    .num {
      position: absolute;
      right: 20rpx;
      bottom: 40rpx;
      width: 66rpx;
      height: 30rpx;
      font-size: 24rpx;
      text-align: center;
      line-height: 30rpx;
      color: #fff;
      background: url('../../static/img/num_bg.png') no-repeat 0rpx 0rpx / 100% 100%;
      border-radius: 15rpx;
    }
  }
  /* 导航菜单 */
  .menu {
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 20%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 20rpx;
      image {
        width: 96rpx;
        height: 96rpx;
      }
      .title {
        font-size: 24rpx;
      }
    }
  }
}

/* 热门推荐与精彩课程 */
.hot-curriculums {
  background: #fff;
  /* 热门推荐 */
  .comment {
    width: 750rpx;
    overflow: hidden;
    .title {
      width: 750rpx;
      padding: 40rpx 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name {
        font-size: 34rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
        &::before {
          content: '';
          width: 4rpx;
          height: 20rpx;
          background: #ffdd47;
          margin-right: 6rpx;
        }
      }
      .more {
        font-size: 24rpx;
        color: #666;
        background: url()
          no-repeat 106rpx 6rpx / 12rpx 22rpx;
        padding-right: 22rpx;
      }
    }

    .hot-list {
      white-space: nowrap;
      width: 750rpx;
      padding-left: 20rpx;
      box-sizing: border-box;

      .item {
        width: 520rpx;
        padding: 20rpx;
        display: inline-block;
        overflow: hidden;
        box-shadow: 3px 9px 9px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10rpx;
        margin-right: 20rpx;

        image.left {
          width: 98 * 2rpx;
          height: 132rpx;
          border-radius: 10rpx;
          margin-right: 20rpx;
          float: left;
        }
        .right {
          float: left;
          .name {
            font-size: 26rpx;
            font-weight: bold;
            width: 260rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .num {
            display: flex;
            font-size: 24rpx;
            color: #666;
            align-items: center;
            margin: 10rpx 0;

            &::before {
              content: '';
              width: 28rpx;
              height: 28rpx;
              background: url('../../static/img/stud.png') no-repeat 0rpx 0rpx / 100% 100%;
              margin-right: 10rpx;
            }
          }
          .bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;

            .price {
              font-weight: bold;
              color: #ff3b30;
            }
            .look {
              font-size: 20rpx;
              color: #999;
            }
          }
        }
      }
    }
  }

  .hot {
    height: 302rpx;
    .hot-list {
      height: 200rpx;
    }
  }

  /* 精彩课程 */
  .curriculums-t {
    .goods-list {
      width: 750rpx;
      padding: 20rpx;
      box-sizing: border-box;

      .item {
        display: flex;
        margin-bottom: 40rpx;
        position: relative;
        padding: 10rpx 0;

        .left {
          width: 98 * 2rpx;
          height: 132rpx;
          border-radius: 10rpx;
          margin-right: 20rpx;
          float: left;
        }

        .mid {
          float: left;
          .name {
            font-size: 26rpx;
            font-weight: bold;
            width: 260rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .num {
            display: flex;
            font-size: 24rpx;
            color: #666;
            align-items: center;
            margin: 10rpx 0;

            &::before {
              content: '';
              width: 28rpx;
              height: 28rpx;
              background: url('../../static/img/stud.png') no-repeat 0rpx 0rpx / 100% 100%;
              margin-right: 10rpx;
            }
          }
          .bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;

            .price {
              font-weight: bold;
              color: #ff3b30;
            }
            .look {
              font-size: 20rpx;
              color: #999;
            }
          }
        }

        .right {
          width: 130rpx;
          height: 40rpx;
          background: #ffdd47;
          text-align: center;
          line-height: 40rpx;
          padding: 10rpx 0;
          font-size: 24rpx;
          margin-top: 28 * 2rpx;
          margin-left: 44 * 2rpx;
        }
      }
    }
  }
}
</style>
